<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { reactive } from "vue";
defineOptions({
  name: "Product"
});
const tableData = [
  {
    date: "2014-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    sex: 0
  },
  {
    date: "2014-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    sex: 1
  },
  {
    date: "2014-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    sex: 1
  },
  {
    date: "2014-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    sex: 0
  }
];
const userState = [
  {
    value: 0,
    label: "正常"
  },
  {
    value: 1,
    label: "封禁"
  }
];
const searchDto = reactive({
  userId: "",
  nickName: "",
  state: null
});
</script>

<template>
  <el-card>
    <el-row style="margin-bottom: 20px" :gutter="20">
      <el-col :span="4">
        <el-input
          v-model="searchDto.userId"
          placeholder="id"
          :prefix-icon="Search"
        />
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="searchDto.userId"
          placeholder="昵称"
          :prefix-icon="Search"
        />
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="searchDto.userId"
          placeholder="邮箱"
          :prefix-icon="Search"
        />
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchDto.state" placeholder="状态">
          <el-option
            v-for="item in userState"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary">搜索</el-button>
      </el-col>
    </el-row>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column align="center" type="selection" width="50" />
      <el-table-column align="center" label="商品图片">
        <template #default="scope">
          <el-image
            :src="scope.row.avatar"
            fit="scale-down"
            preview-teleported
            hide-on-click-modal
          />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="date" label="商品编码" />
      <el-table-column align="center" prop="address" label="商品名称" />
      <el-table-column align="center" prop="address" label="商品简介" />
      <el-table-column align="center" prop="name" label="商品价格" />
      <el-table-column align="center" prop="name" label="商品类型" />
      <el-table-column align="center" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.sex === 1 ? 'success' : 'danger'">{{
            scope.row.sex === 1 ? "女" : "男"
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="address" label="发布时间" />
      <el-table-column align="center" prop="address" label="发布人" />
      <el-table-column label="操作" align="center" width="200px">
        <template #default="scope">
          <el-button size="small">Edit</el-button>
          <el-button size="small" type="danger">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      :total="1000"
    />
  </el-card>
</template>

<style lang="scss" scoped>
.main-content {
  margin: 5px !important;
}
.el-pagination {
  justify-content: flex-end !important;
}
</style>
